
var htmlWP = require('html-webpack-plugin');

module.exports={
    entry:'./src/main.js', //指定打包的入口文件
    output:{ //输出
        path : __dirname+'/dist', //打包以后的文件存放目录 注意：webpack1.14.0 要求这个路径是一个绝对路径
        filename:'build.js'  //打包之后的文件名称
    },
    module:{
        loaders:[
            {
                test: /\.css$/, //打包.css文件
                loader:'style-loader!css-loader'
            },
            {
                test: /\.scss$/, //打包.scss文件
                loader:'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.(png|jpg|gif|ttf|svg)$/, //注意url可能请求多个资源，所以将来在项目中通过url导入的资源扩展名必须配置在这里
                loader:'url-loader?limit=20000' //loader:'url-loader' //这种配置会将图片变成一个base64位的字符串存储到build.js中 打内容打包进去了
                                                //限制图片的大小如果<40k则把他当做base64字符串存储到build.js中
                                                //如果>20k则单独将图片存放到磁盘上，将路径打包进去build.js
                                                //limit表示图片的大小为40k是临界值  20000b 差不多= 20kb   1kb=1024b
            },
            //由于webpack2.0本身已经支持es6转es5语法了，所以这个地方可以删除
            // {
            //     test: /\.js$/, // 将.js文件中的es6语法转成es5语法
            //     loader:'babel-loader', 
            //     exclude:/node_modules/
            // },
            {
                test: /\.vue$/, //解析 .vue 组件
                loader:'vue-loader'  //实现less文件的打包
            },
            {
                test: /vue-preview.src.*?js$/,  // vue-preivew组件专用
                loader: 'babel-loader'
            }
        ]
    },
    //由于webpack2.0本身已经支持es6转es5语法了，所以这个地方可以删除
    // babel:{
    //     presets:['es2015'],  // 配置将es6语法转换成es5语法
    //     plugins:['transform-runtime'] // 用来解析vue文件
    // },
    plugins:[
        new htmlWP({
            title: '首页',  //生成的页面标题
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'index1.html' //根据template.html这个模板来生成(这个文件程序员自己书写)
        })

    ]
}